<template>
    <Layout>
        <Tabs class-prefix="type" :data-source="recordTypeList" :value.sync="type"></Tabs>
        <!--        <Tabs class-prefix="interval" :data-source="intervalList" :value.sync="interval"/>-->
        <!--        日、周、月暂时没构思好，先停下-->
        <ol v-if="groupedList">
            <li v-for="(group,index) in groupedList" :key="index">
                <h3 class="title"> {{beautify(group.title)}}
                    <span>￥{{group.total}}</span>
                </h3>
                <ol>
                    <li v-for="item in group.items" :key="item.id" class="record">
                        <span>{{tagString(item.tags)}}</span>
                        <span class="notes">{{item.notes}}</span>
                        <span>￥{{item.amount}}</span>
                    </li>
                </ol>
            </li>
        </ol>
        <div class="message" v-else>
            数据不存在，请输入。
        </div>
    </Layout>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Tabs from '@/components/Tabs.vue';
    import {Component} from 'vue-property-decorator';
    import recordTypeList from '@/constants/recordTypeList.ts';
    import clone from '@/lib/clone.ts'
    import dayjs from 'dayjs';

    @Component({
        components: {Tabs}
    })
    export default class Statistics extends Vue {
        type = '-';
        recordTypeList = recordTypeList;

        get recordList() {
            // eslint-disable-next-line no-undef
            return (this.$store.state as RootState).recordList;
            //    as断言类型,现在custom.d.ts里
        }
        get groupedList(){
            const {recordList} = this
            if(recordList.length ===0) {return []}
            const newList = clone(recordList)
            .filter( r => r.type === this.type)
        //    返回与type一致的数组'-'支出 '+' 收入
            .sort((a,b)=> {return dayjs(b.date).valueOf() - dayjs(a.date).valueOf()})
            //排序将日期从后到前排

            // eslint-disable-next-line no-undef
            type Result = {title: string,total?: number, items: RecordItem[]}[]
            if(!newList||newList.length==0){
                return false
            }
            const result : Result = [{title: dayjs(newList[0].date).format('YYYY-MM-DD'),items:[newList[0]]}];

            for(let i=1;i<newList.length;i++){
                const current = newList[i]
                const last = result[result.length - 1];
                if(dayjs(last.title).isSame(dayjs(current.date),'day')){
                    last.items.push(current);
                }else{
                    result.push({title: dayjs(current.date).format('YYYY-MM-DD'),items:[current]});
                }
            }
            result.map(group =>{
                group.total = group.items.reduce((sum,item)=>{
                    return sum + item.amount;
                },0);
                //使用reduce的第二个参数是为了防止累计操作时数组为空时出错
            });

            return result;
        }

        // eslint-disable-next-line no-undef
        tagString(tags: Tag[]) {
            let formatTag = tags.map(tag=>{
                return tag.name
            })
            return tags.length === 0 ? '无' : formatTag.join(',');
        }

        //tagList长度为0的时候表示标签没有记录，返回无，否则用逗号隔开返回标签


        beautify(string: string) {
            // console.log('string---',string)
            const day = dayjs(string);
            const now = dayjs();

            if(day.isSame(now,'day')){
                return '今天';
            }else if(day.isSame(now.subtract(1,'day'),'day')){
                return '昨天'
            }else if(day.isSame(now.subtract(2,'day'),'day')){
                return '前天'
            }else if(day.isSame(now,'year')){
                return day.format('M月D日')
            }else{
                return day.format('YYYY年M月D日')
            }
        }
        beforeCreate(){
            this.$store.commit('fetchRecords')
        }

    }
</script>

<style lang="scss" scoped>
    ::v-deep .type-tabs-item {
        /*height:48px;*/
        background: white;

        &.selected {
            background: #C4C4C4;
            filter: brightness(110%);

            &::after {
                display: none;
            }
        }
    }

    %item {
        padding: 8px 16px;
        line-height: 24px;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    .title {
        @extend %item;
    }

    .record {
        background: white;
        @extend %item;
    }

    .notes {
        margin-right: auto;
        margin-left: 16px;
        color: #999;
    }
    .message{
        color: red;
        font-size: 30px;
    }
</style>